<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${basePath }/public/hplus-4.1.0/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${basePath }/public/hplus-4.1.0/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <!-- Morris -->
    <link href="${basePath }/public/hplus-4.1.0/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="${basePath }/public/hplus-4.1.0/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="${basePath }/public/hplus-4.1.0/css/animate.min.css" rel="stylesheet">
    <link href="${basePath }/public/hplus-4.1.0/css/style.min862f.css?v=4.1.0" rel="stylesheet">

	<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
	
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content" id="app">
        <div class="row" id="showPanel">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins orderAmount">{{orderAmount}}</h1>
                        <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                        </div>
                        <small>总额</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全部</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins orderNum">{{orderNum}}</h1>
                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                        </div>
                        <small>数量</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">全部</span>
                        <h5>用户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">-.-.-.-</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                        </div>
                        <small>数量</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">最近一周</span>
                        <h5>活跃用户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">-.-.-.-</h1>
                        <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>
                        </div>
                        <small>当前</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>项目列表</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <table id="table"></table>
								<div id="pager"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>订单金额项目占比</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                               <div id="order-project-percent">
                               </div>
                            </div>
                        </div>
                    </div>
                
        </div>
    </div>

    <script src="${basePath }/public/hplus-4.1.0/js/jquery.min.js?v=2.1.4"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/demo/peity-demo.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/content.min.js?v=1.0.0"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/demo/sparkline-demo.min.js"></script>
    
    <!--jqgrid-->
    <link href="${basePath }/public/hplus-4.1.0/css/plugins/jqgrid/ui.jqgridffe4.css" rel="stylesheet">
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jqgrid/jquery.jqGrid.minffe4.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jqgrid/i18n/grid.locale-cnffe4.js"></script>
    <script src="${basePath }/public/js/jquery/jquery.contextmenu.js"></script>
    
    <!-- 基于jqgrid-table的数据列表工具 -->
	<script src="${basePath }/public/js/jqGridTable.js"></script>
	
	<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
	
	<script src="${basePath }/public/js/utils/string.js"></script>
	<!-- animejs -->
	<script src="${basePath }/public/plugins/animejs/anime.min.js"></script>
	
    <script>
    	var basePath = "${basePath}";
    	
    	var app = new Vue({
  			el: '#app',
  			data: {
    			orderAmount: '-.-.-',
    			orderNum:'-.-.-'
  			}
		});
    	
        
        //展示订单金额的项目占比
        var orderPercentDatas = [];
        
        $(function () {
			
  			var result = ajaxFunc("${basePath }/admin/tallyRequestInfo/requestStatistics.do","","json");
			if(result instanceof Object) {
    		} else {
    			//将字符串返回值转换为json类型
    			result = eval("("+ result +")");
    		}
    		if (result.statusCode == "200"){
    			//成功
    			var totalAmount = 0;
    			var totalNum = 0;
    			result.data.forEach(function(val,index,arr){
    				var projectNo = val.projectNo;
    				var amountABS = parseFloat(val.amountABS);
    				var num = Number(val.num);
    				totalAmount += amountABS;
    				totalNum += num;
    				
					orderPercentDatas[index] = {name: projectNo,y: amountABS,sliced: false,selected: false};
				});
				
				totalAmount = totalAmount.toFixed(2);
				
				var orderAnimeObject = {orderAmount:0,orderNum:0};
				var orderAnime = anime({
  					targets: orderAnimeObject,
  					orderAmount: totalAmount,
  					orderNum:totalNum,
  					round: 1,
  					easing: 'linear',
  					update: function(anim) {
  						if (!anim.completed) {
    						app.orderAmount = formatCurrency(orderAnimeObject.orderAmount);
							app.orderNum = orderAnimeObject.orderNum;
						}
  					},
  					complete: function(anim) {
    					app.orderAmount = formatCurrency(totalAmount);
						app.orderNum = totalNum;
  					}
				});
    		} else if (result.statusCode == "300") {
    			//失败
    			console.log("获取订单统计失败");
    		} else if (result.statusCode == "301") {
    			//超时
    			console.log("获取订单统计超时");
    		}  else if (result.statusCode == "303") {
    			//重新登入
    			console.log("获取订单统计失败");
    		} else if (result.statusCode == "500") {
    			//出错
    			console.log("获取订单统计出错");
    		} else {
    			console.log("获取订单统计失败");
    		}
  			
    		
    		
    		common_jqgrid.createOptions(options);
			common_jqgrid.init();
			common_jqgrid.setHeight(330);
    		
    		showCharts();
		});
		
		/**
	 * ajax请求并返回结果
	 * @param url
	 * @param data
	 * @param callback
	 * @returns {String}
	 */
	var ajaxFunc = function(url, data, dataType, callback){
		if(dataType == undefined || dataType == null){
			dataType = "html";
		}
		
		var result = "";
		$.ajax({
			type : "post",
			url : encodeURI(encodeURI(url)),
			data : data,
			dataType : dataType,
			contentType: "application/x-www-form-urlencoded; charset=UTF-8",
			async: false,
			cache: false,
			beforeSend: function(XMLHttpRequest){
				
    		},
    		success: function(data, textStatus){
    			
    			result = data;
				//扩展回调函数
				if( callback != null ){
					callback(result);
				}
    		},
    		complete: function(XMLHttpRequest, textStatus){
    			
    		},
    		error: function(XMLHttpRequest, textStatus, errorThrown){
    			
    		}
		});
		return result;
	}
        
	var options = {
        url:"${basePath}/admin/projectInfo/list.do",
        tableId:"table",
        pager:"#pager",
        pgtext:"共  {1} 页",
		recordtext: "共 {2} 条",
        multiselect: false,//复选框
        multiboxonly: false,//单选
        border:"tb",
        heightAdapterValue:200,
        prmNames: {
             		sort: "sort",
             		order: "order",
             		search: "search"
             	},
        colModel: [
			{
				name: 'id',
				index: 'id',
				label: 'id',
				width: 300,
				sorttype: "int",
				hidden:true
			},
			{
				name: 'projectNo',
				index: 'projectNo',
				label: '项目编号',
				width: 200
			},
			{
				name: 'projectName',
				index: 'projectName',
				label: '项目名称',
				width: 300
			}
		]
	}
	
	
	function showCharts() {
		
		$('#order-project-percent').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.y:.2f}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.2f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        credits: {
            	text: 'innjia.com',
            	href: 'http://www.innjia.com'
        },
        series: [{
            type: 'pie',
            name: '金额',
            data: orderPercentDatas
        }]
    });
	}
	
    </script>
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/index_v3.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:49 GMT -->
</html>
